<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/imgenlarge.css">
		<link rel="stylesheet"  href="../css/video.css">
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
			}
			.mui-bar{
				background: #FE635F;
			}
			
		.mui-titles{
			position: relative;
			float: right;
		}
		.mui-content{
			position: relative;
			float: left;
			width: 100%;
			padding: 10px  0px;
			display: inline-block;
			background: #FFFFFF;
		}		
		.biaoti{
			position: relative;
			float: left;
			width: calc(100% - 44px);
			height: 100%;
			display: flex;
			justify-content: space-around;
			padding-top: 5px;
			box-sizing: border-box;
		}
		
		.biaoti>div{
			width: 64px;
			height: 35px;
			font-size:15px;
            font-weight:bold;
            color:rgba(255,255,255,1);
			line-height: 35px;
		
			box-sizing: border-box;
		}
	.tiactive{
			border-bottom: 2px  solid #FFFFFF;
	}
		
		.mui-bar-nav>img:nth-child(1){
			position: relative;
			float: left;
			width: 20px;
			height: 27px;
			margin-top: 10px;
		}
		.mynews{
			position: absolute;
			width: 22px;
			height: 100%;
			right: 15px;
			z-index: 10;
		}
		.mynews>img:nth-child(1){
			width: 22px;
			height: 22px;
			margin-top: 10px;
		}
		.mynews>img:nth-child(2){
				width: 7px;
				height: 7px;
				position: absolute;
				top: 10px;
				right: 0px;
		}
			
		a{
			color:#FFFFFF;
		}
		a:active{
				color:#FFFFFF;
		}
			.leftnews,.rightnews{
			position: relative;
		    width: 100%;
			float: left;
			margin-top: 15px;
			padding: 0  15px;
		}
		.leftnews>div:nth-child(1){
			position: relative;
			float: left;
			width: 44px;
			height: 100%;
			
		}
		
		.leftnews>div:nth-child(1)>img{
			width: 44px;
			height: 44px;
			border-radius: 50%;
			}
		
		.leftnews>div:nth-child(2){
					position: relative;
					float: left;
					width: calc(100% - 54px);
					height: 100%;
					padding-left: 10px;
					box-sizing: border-box;
				
				}
		.leftnews>div:nth-child(2)>div:nth-child(1){
			width: 100%;
			height: 22px;
			line-height: 22px;
		    font-weight:500;
		    color:rgba(153,153,153,1);
		    line-height:22px;
			text-align: left;
			font-size:15px;
font-family:PingFang-SC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
		}
			.neirong{
				width: 100%;
				line-height: 22px;
				font-size:11px;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:22px;
				background:rgba(255,255,255,1);
		        border-radius:10px;
				padding: 5px  0px;
				box-sizing: border-box;
				  margin-top: 5px;
				  font-size:15px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
			}
			.hudate{
				width: 100%;
			height: 22px;
			line-height: 22px;
			font-size:11px;
			font-weight:500;
			color:rgba(153,153,153,1);
			line-height:22px;
			text-align: left;
				
			}
		.imgs{
			width:100%;
			position: relative;
		}	
		.imgs>img{
			position: relative;
			float: left;
			width: 30%;
			height: 77px;
			margin-left: calc(10% / 3);
			margin-top: 5px;
		}
		.zans{
			position: relative;
			float: left;
			width: 100%;
            height: 40px;
			border-bottom: 1px solid rgba(235,235,235,1);
		}
		
		.zans>div{
			position: relative;
			float: right;
			width: 80px;
			height: 40px;
		}
		.zans>div>img{
		position: relative;
		float: left;	
		width:22px;
		height:22px;
		margin-top: 6px;
		}
			.zans>div:nth-child(1)>img{
				margin-top: 8px;
			}
		
		
		.zans>div>span{
			position: relative;
			float: left;
			width: calc(100% -  22px);
			height: 40px;
			line-height: 40px;
			text-align: right;
			padding-right:10px;
			box-sizing: border-box;
			ont-size:13px;
            font-weight:500;
            color:rgba(151,151,151,1);
		}
		
		.myactivation{
			position: fixed;
			width: 65px;
			height:65px;
			right: 15px;
			bottom: 230px;
			z-index: 10;
		}
		.myactivation>img{
			width: 65px;
			height: 65px;
		}
		.imgs video{
			width: 100%;
			height: 200px;
		}
		</style>
	</head>

	<body contextmenu="return false;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div class="biaoti">
				<div class="tiactive" data-index="0">交友广场</div>
				<div data-index="1">我的动态</div>
			</div>
			<div class="mynews"><img src="../image/news.png" /><img src="../image/dian.png" /></div>
		</header>


		<div class="mui-content" id="content">
			<div id="zuobian">
				<!-- <div class="leftnews">
					<div><img src="../image/touxiangmy.png" /></div>
					<div>
						<div>张雪</div>
						<div class="hudate">20分钟前</div>
						<div class="neirong">音乐让人痴迷的点，就是它的内容，它的情感，它的境界。其实，很多人听不出歌手的能力，听到喜欢的歌时，要不就是被那声音打动，或者被歌词感染，要么就是感觉这首歌，唱到了自己的心理，所以，不断的听，不断的沉溺在哪个世界之中，不能自拔。</div>
						<div class="imgs">
							<img index='0' src="../image/qunmin.png" />
							<img index='1' src="../image/drug.png" />
							<img index='2' src="../image/orders.png" />
							<img index='3' src="../image/drug.png" />
						</div>
						<div class="zans">
							<div class="comment"><span>10</span><img src="../image/comment.png" /></div>
							<div class="fablous" state=0><span>10</span><img src="../image/zanfalse.png" /></div>
						</div>
					</div>
				</div>
				<div class="leftnews">
					<div><img src="../image/touxiangmy.png" /></div>
					<div>
						<div>李雪</div>
						<div class="hudate">40分钟前</div>
						<div class="neirong">音乐让人痴迷的点，就是它的内容，它的情感，它的境界。其实，很多人听不出歌手的能力，听到喜欢的歌时，要不就是被那声音打动，或者被歌词感染，要么就是感觉这首歌，唱到了自己的心理，所以，不断的听，不断的沉溺在哪个世界之中，不能自拔。</div>
						<div class="imgs">
						<video src="../video/shiyong.mp4" controls="controls"  poster="../image/poster-1.png" >
						</video>	
						</div>
						<div class="zans">
							<div class="comment"><span>10</span><img src="../image/comment.png" /></div>
							<div class="fablous" state=0><span>10</span><img src="../image/zanfalse.png" /></div>
						</div>
					</div>
				</div> -->
			</div>
			
			
			<div id="youbian" style="display: none;">
				<!-- <div class="leftnews">
					<div><img src="../image/touxiangmy.png" /></div>
					<div>
						<div>张雪1</div>
						<div class="hudate">20分钟前</div>
						<div class="neirong">音乐让人痴迷的点，就是它的内容，它的情感，它的境界。其实，很多人听不出歌手的能力，听到喜欢的歌时，要不就是被那声音打动，或者被歌词感染，要么就是感觉这首歌，唱到了自己的心理，所以，不断的听，不断的沉溺在哪个世界之中，不能自拔。</div>
						<div class="imgs">
							<img index='0' src="../image/qunmin.png" />
							<img index='1' src="../image/drug.png" />
							<img index='2' src="../image/orders.png" />
							<img index='3' src="../image/drug.png" />
						</div>
						<div class="zans">
							<div class="comment"><span>10</span><img src="../image/comment.png" /></div>
							<div class="fablous" state=0><span>10</span><img src="../image/zanfalse.png" /></div>
						</div>
					</div>
				</div>
				<div class="leftnews">
					<div><img src="../image/touxiangmy.png" /></div>
					<div>
						<div>李雪1</div>
						<div class="hudate">40分钟前</div>
						<div class="neirong">音乐让人痴迷的点，就是它的内容，它的情感，它的境界。其实，很多人听不出歌手的能力，听到喜欢的歌时，要不就是被那声音打动，或者被歌词感染，要么就是感觉这首歌，唱到了自己的心理，所以，不断的听，不断的沉溺在哪个世界之中，不能自拔。</div>
						<div class="imgs">
						<video src="../video/shiyong.mp4" controls="controls"  poster="../image/poster-1.png" >
					   <source  type="video/mp4" />  
						</video>	
						</div>
						<div class="zans">
							<div class="comment"><span>10</span><img src="../image/comment.png" /></div>
							<div class="fablous" state=0><span>10</span><img src="../image/zanfalse.png" /></div>
						</div>
					</div>
				</div> -->
			</div>
			<div class="myactivation"><img src="../image/activation.png" /><span></span></div>
		</div>
		<div class="bg" style="display:none">
			<div class="bgimg"><img src="../image/drug.png" style=""></div>
		</div>
	    <!-- 视频播放区域-->
	    <div class="mui-video-Container" id="video_Container">
	    	<div class="mui-video-full">
	    		<!--加载提示-->
	    		<div class="rprogress">
	    			<span class="ladtit">加载</span>
	    			<div class="rschedule"></div>
	    		</div>
	    		<!--end-->
	    		<!--全屏时后退图标-->
	    		<span class="mui-full-back">
	    			<svg class="icon" aria-hidden="true">
	    				<use xlink:href="#icon-houtui1"></use>
	    			</svg>
	    			<span class="vtitle"></span>
	    		</span>
	    		<!--end-->
	    		<!--播放按钮-->
	    		<span class="mui-pay_ico">
	    			<svg class="icon" aria-hidden="true">
	    				<use xlink:href="#icon-bofang1"></use>
	    			</svg>
	    		</span>
	    		<!--end-->
	    		<div class="v_left"></div>
	    		<div class="b_right"></div>
	    		<div class="ptime"></div>
	    		<div class="mui-video-txt"></div>
	    		<!-- 播放进度条-->
	    		<div class="mui-videoControls">
	    			<span class="mui-time-total mui-quanping">
	    				<!--全屏按钮-->
	    				<span class="mui-time-cout">00:00</span>
	    				<!--总时间-->
	    				<span class="mui-full-btu">
	    					<svg class="icon" aria-hidden="true">
	    						<use xlink:href="#icon-quanping"></use>
	    					</svg>
	    				</span>
	    			</span>
	    			<span class="mui-time-current">00:00</span>
	    			<!--进度时间-->
	    			<div class="mui-progressWrap">
	    				<!--可以拖动的进度条-->
	    				<div class="mui-wrap-right">
	    					<input type="range" id='mui-block-range' value="0" min="0" max="100">
	    				</div>
	    			</div>
	    		</div>
	    		<!-- 播放进度条end-->
	    	</div>
	    </div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/html5video.js"></script>
	<script src="../js/hls.min.js"></script>
	<script src="../js/jquery-3.1.1.min.js"></script>
	<script src="../js/imgenlarge.js"></script>
	<script src="hujiaoyou.js"></script>
	<script type="text/javascript" charset="utf-8">
		window.addEventListener("refresh", function (e) {
			location.reload();
			});
			
			window.addEventListener("xinduw", function (e) {
				location.reload();
				});
		mui.plusReady(function(){
						// mui.init({});
			
			var url = plus.storage.getItem('url');
			var user = plus.storage.getItem('user');
			user = JSON.parse(user);
			var guangchang_create = 0;
			var guangchangpage = 1;
			var wdepage = 1;
			var wde_create = 0;
			var huoqutype = '0';
			
			mui.post(url+'/juyou/Jiaoyou/getjiaoyou',{token:user.token},function(res){
				if(res.code==200){
					// mui.alert(res.data.guangchang.length)
					// mui.each(res.data.guangchang,function(i,v){
					// 	// tianjias(v);
					// })
					// mui.alert(res.data.mydongtai.length)
					// mui.each(res.data.mydongtai,function(i,v){
					// 	tianjia(v);
					// })
					
					mui.init({
						pullRefresh : {
							container:'#content',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
							up : {
								height:50,//可选.默认50.触发上拉加载拖动距离
								auto:true,//可选,默认false.自动上拉加载一次
								contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
								contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
								callback :function(){
								// setTimeout(function(){
								// 	mui('#content').pullRefresh().endPullupToRefresh();
								// },1000)
								getData(function(){
									mui('#content').pullRefresh().endPullupToRefresh();
										})
									} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
								},
						}
					});
					
					
					function getData(func){
						var create_time = '';
						 if(huoqutype==1){
							 if(guangchangpage==0){
								 mui.toast('没有更多了');
								 if(func){
									 func();
								 }
								 return
							 }
							create_time = guangchang_create;
						}else if(huoqutype==2){
							if(wdepage==0){
								mui.toast('没有更多了');
								if(func){
									func();
								}
								return
							}
							create_time = wde_create;
						}
						mui.post(url+'/juyou/Jiaoyou/getjiaoyoulist',{token:user.token,create_time:create_time,huoqutype:huoqutype},function(res){
							if(res.code==200){
								if(huoqutype=='0'){
									if(res.data.guangchang.length<0){
										guangchangpage =0;
									}
									mui.each(res.data.guangchang,function(i,v){
										lishitianjiaGuangchang(v);
									})
									if(res.data.mydongtai<10){
										wdepage = 0;
									}
									mui.each(res.data.mydongtai,function(i,v){
										lishitianjiaWoDe(v);
									})
									guangchang_create = res.data.guangchang_create;
									wde_create = res.data.wde_create;
									huoqutype = 1;
								}else if(huoqutype==1){
									guangchang_create = res.data.create_time;
									if(res.data.data.length<10){
										guangchangpage =0;
									}
									mui.each(res.data.data,function(i,v){
										lishitianjiaGuangchang(v);
									})
								}else if(huoqutype==2){
									wde_create = res.data.create_time;
									if(res.data.data.length<10){
										wdepage = 0;
									}
									mui.each(res.data.data,function(i,v){
										lishitianjiaWoDe(v);
									})
									
								}
							}else{
								mui.toast(res.msg);
							}
							if(func){
								func();
							}
						})
					}
					
					// mui.alert('haha')
					if(res.data.huifu>0){
						$(".mynews").children('img').eq(1).show();
					}else{
						$(".mynews").children('img').eq(1).hide();
					}
					//及时通讯
					var ws = new WebSocket("ws://58.82.250.98:2348");
					ws.onopen = function(){
						console.log('连接成功');
					}
					ws.onmessage = function(rult){
						var data = rult.data;
						data = JSON.parse(data);
						//绑定广场
						if(data.client_id){
							// mui.toast(data.client_id);
							mui.post(url+'/juyou/Jiaoyou/bindguangchang',{client_id:data.client_id,token:user.token},function(res){
								// mui.alert('haha');
								// mui.toast(res.msg)
								if(res.code==200){
									console.log('绑定成功');
									// mui.toast('绑定成功');
								}else{
									mui.toast(res.msg);
								}
								
							})
						}else if(data.user){
							tianjias(data,user.id);
						}else if(data.type=='update_dongtai'){
							mui.post(url+'/juyou/Jiaoyou/getdynamicinfo',{token:user.token,pinglun:data.dongtaiid},function(ress){
								if(ress.code==200){
									if(ress.data.wde>0){
										$("[data-id="+ress.data.data.id+"]").attr('state','1');
										$("[data-id="+ress.data.data.id+"]").children('img').attr("src", "../image/zantrue.png")
										$("[data-id="+ress.data.data.id+"]").children('span').text(ress.data.zan)
										$("[data-pid="+ress.data.data.id+"]").children('span').text(ress.data.pinglun.total)
									}else{
										$("[data-id="+ress.data.data.id+"]").attr('state','0');
										$("[data-id="+ress.data.data.id+"]").children('img').attr("src", "../image/zanfalse.png")
										$("[data-id="+ress.data.data.id+"]").children('span').text(ress.data.zan)
										$("[data-pid="+ress.data.data.id+"]").children('span').text(ress.data.pinglun.total)
									}
								}else{
									mui.toast(res.msg);
								}
							})
						}else if(data.type=='sirenxiaoxi'){
							$(".mynews").children('img').eq(1).show();
						}
					}
					ws.onclose = function(){
						mui.toast('断开连接')
					}
				}else{
					mui.toast(res.msg);
				}
			})

			
					mui("#content").on("tap", ".numbers", function() {
						mui.openWindow({
							url: 'qunmembersub4.html',
							id: "qunmembersub4.html",
							extras: {
								src: '../video/shiyong.mp4',
							},
							show: {
								autoShow: true, //页面loaded事件发生后自动显示，默认为true
								aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
								duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
							},
							waiting: {
								autoShow: true, //自动显示等待框，默认为true
								title: '正在加载...', //等待对话框上显示的提示内容
							}
						})
					})
			
			
			
					// 点赞
				$(document).on("tap", ".zans  .fablous", function() {
						var state = $(this).attr("state");
						var dongtai = $(this).attr('data-id');
						var that = this;
						if(state==1){
							state = '0';
						}else{
							state = 1;
						}
						// mui.alert(dongtai)
						// console.log(state);
						mui.post(url+'/juyou/Jiaoyou/dianzan',{token:user.token,dongtai:dongtai,state:state},function(res){
						// mui.toast(res.msg);
							if(res.code==200){
								// mui.toast(mydianzan);
								if(res.data.mydianzan==1){
									
									
									// $(that).attr("state", "1")
									$("[data-id="+dongtai+"]").attr('state','1');
									$("[data-id="+dongtai+"]").children('img').attr("src", "../image/zantrue.png")
									$("[data-id="+dongtai+"]").children('span').text(res.data.count)
									// $(that).children("img").attr("src", "../image/zantrue.png")
								}else{
									$("[data-id="+dongtai+"]").attr('state','0');
									$("[data-id="+dongtai+"]").children('img').attr("src", "../image/zanfalse.png")
									$("[data-id="+dongtai+"]").children('span').text(res.data.count)
									// $(that).attr("state", "0")
									// $(that).children("img").attr("src", "../image/zanfalse.png")
								}
							}else{
								mui.toast(res.msg);
							}
						})
						// if (state == 0) {
							// $(this).attr("state", "1")
							// $(this).children("img").attr("src", "../image/zantrue.png")
						// } else {
							// $(this).attr("state", "0")
							// $(this).children("img").attr("src", "../image/zanfalse.png")
						// }
					})
			
			
					//切换交友广场
					mui(".biaoti").on("tap", "div", function() {
						var state = $(this).addClass("tiactive")
						$(this).siblings().removeClass("tiactive")
						var number = $(this).attr('data-index');
						// mui.alert(number);
						if(number==1){
							huoqutype = 2;
							$("#youbian").show();
							$("#zuobian").hide();
						}else{
							huoqutype = 1;
							$("#youbian").hide();
							$("#zuobian").show();
						}
						// mui.alert(huoqutype);
					})
			
				
				//发布动态
				mui(".myactivation").on("tap", "img", function() {
					       var btnArray = ['视频动态','图片动态']; 
					       mui.confirm('请选择发布得动态类型', '发布动态', btnArray, function(e) { 
					           if (e.index == 0) { 
								  	mui.openWindow({
								  	url: 'shipingactives.html',
								  	id: "shipingactives.html",
								  })
					           }else if(e.index == 1){
									
								  	mui.openWindow({
									url: 'imgactive.html',
									id: "imgactive.html",
								})
							   }  
					       })
				})
			
					//评论
					$(document).on("tap", ".zans .comment", function() {
						var pinglun = $(this).attr('data-pid');
						// mui.alert(pinglun);
						// return
						mui.openWindow({
							url: 'hujiaoyoutalk.html',
							id: "hujiaoyoutalk.html",
							extras: {
								//参数
								pinglun:pinglun
							},
							show: {
								autoShow: true, //页面loaded事件发生后自动显示，默认为true
								aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
								duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
							},
							waiting: {
								autoShow: true, //自动显示等待框，默认为true
								title: '正在加载...', //等待对话框上显示的提示内容
							}
						})
					})
			
					//我的消息
					mui(".mui-bar").on("tap", ".mynews", function() {
						mui.openWindow({
							url: 'hujiaoyoutalklist.html',
							id: "hujiaoyoutalklist.html",
							extras: {
								//参数
							},
							show: {
								autoShow: true, //页面loaded事件发生后自动显示，默认为true
								aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
								duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
							},
							waiting: {
								autoShow: true, //自动显示等待框，默认为true
								title: '正在加载...', //等待对话框上显示的提示内容
							}
						})
					})
			
			
			//视频
			// mui(document).on("tap","video",function(){
			// 	 var  src=$(this).attr("src");
			// })
		
})

	</script>


</html>
